import React from 'react';
import { useTermsI18n } from '../Terms/useTermsI18n';

const Prohibited: React.FC = () => {
	const { data, loading, error } = useTermsI18n('Terms_of_Prohibited');

	if (loading) {
		return (
			<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8 flex items-center justify-center">
				<div className="text-gray-600 dark:text-gray-400">Loading...</div>
			</div>
		);
	}

	if (error || !data) {
		return (
			<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8 flex items-center justify-center">
				<div className="text-red-600 dark:text-red-400">{error || 'Failed to load terms data'}</div>
			</div>
		);
	}

	return (
		<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
			<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
				<div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8">
					<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">{data.title}</h1>
					<p className="text-sm text-gray-600 dark:text-gray-400 mb-8">{data.lastModified}</p>

					<div className="space-y-8">
						{Object.entries(data.sections).map(([key, section]) => (
							<section key={key} className="border-b border-gray-200 dark:border-gray-700 pb-6 last:border-b-0">
								<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">{section.title}</h2>
								<p className="text-gray-700 dark:text-gray-300 leading-relaxed">{section.content}</p>
							</section>
						))}
					</div>
				</div>
			</div>
		</div>
	);
};

export default Prohibited;